<template>
  <!-- 将默认属性与事件传递下去-->
  <Table
    ref="tableRef"
    v-bind="attrs"
    :size="props.size || isInDrawer ? 'small' : configSize"
    :bordered="props.bordered || isBordered"
  >
    <!-- 插槽传递-->
    <template v-for="slotName in slotNames" #[slotName]="body">
      <!-- 勿动！！-->
      <template v-if="slots[slotName]">
        <slot :name="slotName" v-bind="body"/>
      </template>
    </template>
  </Table>
</template>

<script>
import {computed, defineComponent, useAttrs, ref, onMounted} from 'vue';
// 单独引入（否则OOM！）
import {Table} from 'ant-design-vue';
import store from "@/store";
import utils from "@/common/utils/utils"
export default defineComponent({
  inheritAttrs: false,
  props: {
    size: {type: String, default: ''},
    bordered: {type: Boolean, default: false},
  },
  components: {
    Table
  },
  setup(props, {slots}) {
    const attrs = useAttrs();
    const tableRef = ref(null);

    // 获取所有插槽
    const slotNames = Object.keys(slots);
    const configSize = computed(() => store.getters.tableConfig.size);
    const isBordered = computed(() => store.getters.tableConfig.isBordered);
    const isInDrawer = ref(false);

    const init = () => {
      const hasAntDrawerParent = utils.hasParentWithClass(tableRef.value.$el, "ant-drawer");
      if (hasAntDrawerParent) {
        isInDrawer.value = true;
        tableRef.value.$el.classList.add("is-drawer-table");
      }
    };

    onMounted(() => {
      init();
    })

    return {
      slots,
      props,
      slotNames,
      attrs,
      configSize,
      isBordered,
      tableRef,
      isInDrawer,
    }
  },
})
</script>

<style lang="less" scoped>
.is-drawer-table {
  :deep(.ant-table-tbody) {
    font-size: 12px;
  }
}
</style>